<!DOCTYPE html>
<html>
<head>
	<title>Fetch tester</title>
	<style type="text/css">
		* {
			font-family: sans-serif;
			margin:0;
			padding:0;
			box-sizing: border-box;
		}
		#intro {
			text-align:center;
			padding:20px 0;
		}
		#fetchform {
			padding:10px 15px;
			background:#eee;
		}
		#fetchform p {
			margin:5px 0;
		}
		#url, #resultdata {
			width:100%;
		}
		#result {
			padding:20px 25px;
		}
		#resultdata {
			font-family:monospace;
			height:70vh;
		}
	</style>
</head>
<body>

<div id="intro">
	<h1>Fetch API Tester</h2>
	<p>Fetches url as text with Javascript's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch API</a> and shows result.</p>
</div>

<form id="fetchform">
	<p><label for="url">Content URL:</label></p>
	<p><input type="text" name="url" id="url" placeholder="enter the URL of a resource that you want to fetch and show the content of..." /></p>
	<p><input type="submit" id="submit" value="Fetch!" /></p>
</form>

<div id="result" style="display:none">
	<p>Fetch result:</p>
	<textarea id="resultdata"></textarea>
</div>

<script type="text/javascript">
document.querySelector("#fetchform").addEventListener("submit", function(e){
	// Show the result div, scroll into it and show status
	document.querySelector("#result").style.display = '';
	document.querySelector("#result").scrollIntoView();
	document.querySelector("#resultdata").innerHTML = 'Retrieving...';

	// Carry on fetch action
	fetch(document.querySelector("#url").value)
		.then(response => response.text())
		.then(text => {
			document.querySelector("#resultdata").innerHTML = text;
			})
		.catch((error) => {
			document.querySelector("#resultdata").innerHTML = 'Fetch error:' + error;
		});

	// Prevent actually submitting the form
	e.preventDefault();
});
</script>

</body>
</html>